<template>
  <div>
    <h2>{{audit}}</h2>
    <h2>学生姓名:{{name}}</h2>
    <h2>学生年龄:{{age}}</h2>
    <h2>{{mm.xx.yy}}</h2>
    <h2><button @click="name += '~' ">姓名+~</button></h2>
    <h2><button @click="age += 1">age+1</button></h2>
    <h2><button @click="mm.xx.yy += '1' ">mm.xx.yy += 1</button></h2>

  </div>
</template>
<script>
  import {ref,toRef,toRefs,reactive,shallowReactive,shallowRef,readonly,shallowReadonly} from "vue";

  export default {
    name: "Test",
    setup() {
      let audit = reactive({
        name: 'xfj',
        age: 98,
        mm:{
          xx:{
            yy:'111'
          }
        }
      })

      // 只读  readonly包装之后 内部所有的属性值都不能够 修改。注意这是深度的
      //audit = readonly(audit)

      //只有第一层的内容不可以被修改，深层对象可以调整修改
      audit = shallowReadonly(audit)

      return {
        ...toRefs(audit)
        
      }
    }
  };
</script>
<style>
</style>